<template>
  <div class="talk_box">
    <div class="talk_header">
      发表评论
    </div>
    <div class="my_talk">
      <!-- <div class="noTalk" v-if="0">用户设置为不可评论</div> -->
      <div class="my_img">
        <img :src="$store.state.nowUserIntro.avatar || img" />
      </div>
      <div class="input">
        <div class="pleaseD" v-if="$store.state.usertf === '1'">
          <div @click="pleaseDenglu">请先登录</div>
        </div>
        <textarea v-model="tals" maxlength="10000" placeholder="文明评论，畅所欲言！"></textarea>
      </div>
      <div class="send_tlak" @click="sendArtical">
        发表评论
      </div>
      <div class="count">{{ len + '/10000'}}</div>
    </div>
    <div class="talks_box">
      <div class="boxus" v-for="(item, indexs) of userTalkzi" :key="item.comment.id">
        <div class="user_talk">
          <div class="user_img">
            <img :src="item.user.avatar || img" />
          </div>
          <p
            class="name"
            :title="item.user.nickname"
          >
             {{item.user.nickname}}
          </p>
          <p class="show_talk">{{item.comment.content}}</p>
          <p class="intro">
            <span>{{item.comment.floor + '楼'}}</span>
            <span>{{item.comment.easyCreateTime}}</span>
            <span class="iconfont" :id="item.comment.id" @click="masterClickZan">&#xe605;<span>{{item.comment.zanSize}}</span></span>
            <span
              class="huifu"
              @click="huifuHandel($event)"
              :id="item.comment.id"
              :name="item.user.nickname"
              :one="item.comment.id"
              v-if="$store.state.usertf === '2'"
              ref="back"
              :two="indexs"
            >
              回复
            </span>
            <span
              @click="drop"
              :id="item.comment.id"
              style="cursor:pointer"
              v-if="$store.state.usertf === '2'"
            >
              删除
            </span>
          </p>
        </div>
        <div class="huifu_box" ref="q">
          <div class="huifus" ref="zi" v-for="itemt of item.childData" :key="itemt.comment.id">
            <img :src="itemt.user.avatar || img" />
            <div class="small_huifu">
            <span
              class="names"
              :title="itemt.user.nickname"
            >
                {{itemt.user.nickname}}
              </span>
            <span class="small_huifu_talk">{{itemt.comment.content}}</span>
              <div class="intros">
                <span>{{itemt.comment.easyCreateTime}}</span>
                <span class="iconfont" :id="itemt.comment.id" ref="zan" @click="smallClickZan">&#xe605;<span>{{itemt.zanSize}}</span></span>
                <span class="iconfont" :id="itemt.comment.id" ref="cai" @click="smallClickCai">&#xe604;<span>{{itemt.caiSize}}</span></span>
                <span
                  class="s_huifu"
                  :id="itemt.comment.pid"
                  :name="itemt.user.nickname"
                  :one="item.comment.id"
                  ref="ziTalk"
                  v-if="$store.state.usertf === '2'"
                  @click="huifuHandel($event)"
                  :two="indexs"
                >
                  回复
                </span>
                <span
                  @click="drop"
                  :id="itemt.comment.id"
                  style="cursor:pointer;margin-left:10px"
                  v-if="$store.state.usertf === '2'"
                >
                  删除
                </span>
              </div>
            </div>
          </div>
          <ul class="smallPage">
            <li>
              <div
                v-for="(itemsmall, index) of item.totals"
                :key="index"
                ref="smalls"
                :index="index"
                :smallTwo="indexs"
                :id="item.comment.id"
                @click="smallPageHandel"
              >
                {{itemsmall}}
              </div>
            </li>
          </ul>
          <div class="ss" ref="backInput" :one="item.comment.id">
            <img :src="$store.state.nowUserIntro.avatar || img">
            <textarea v-model.trim="talss" cols="80" rows="5" :placeholder="name"></textarea>
            <button @click="sendSmallhandel" :master="indexs">发表评论</button>
          </div>
        </div>
      </div>
      <div class="page_box" v-if="pageCount > 1">
        <ul class="uls_page">
          <li class="home" @click="home">首页</li>
          <li class="pre" @click="pret">上一页</li>
          <div class="pagebtn_box">
            <li
              class="page"
              v-for="(items, index) of jinqis"
              :key="index"
              ref="li"
              @click="pagebtn"
            >
              {{items}}
            </li>
          </div>
          <div class="box">
            <li class="next" @click="next">下一页</li>
            <li class="end" @click="end">尾页</li>
            <li class="pageCount">共&nbsp;{{pageCount}}&nbsp;页</li>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { pages, fenpage } from 'com/pages'
import { sendTalk, dropCommtent, createZanByComment, getNowTalk, sendSmallTalk, getZiPage } from 'com/shuju'
export default {
  name: 'ArticalTalk',
  data () {
    return {
      img: require('../../../assets/images/touxiang.gif'),
      tals: '',
      talss: '',
      id: null,
      indexs: null,
      name: '文明评论,畅所欲言！',
      name2: '',
      currenPage: 0,
      smallcurrenPage: 0,
      click1Tf: 0,
      click2Tf: 0
    }
  },
  computed: {
    len () {
      return this.tals.length
    },
    ...mapState({
      userTalk: 'nowTalk',
      userTalkzi: 'nowTalkSmall'
    }),
    jinqis () {
      let pages = []
      for (let i = 0; i < Math.ceil(this.userTalk.tatal / 5); i++) {
        pages[i] = i + 1
      }
      return pages
    },
    pageCount () {
      return this.jinqis.length
    }
  },
  watch: {
    tals () {
      if (this.tals.length === 10000) {
        alert('单条评论最多只能输入  10000  字')
      }
    }
  },
  methods: {
    drop () {
      var tf = confirm('是否删除')
      if (tf) {
        var id = event.target.getAttribute('id')
        dropCommtent(id, event.target.parentNode.parentNode, event.target.parentNode.parentNode.previousSibling, this)
      }
    },
    masterClickZan () { // 主评论点赞
      if (this.$store.state.usertf === '1') {
        alert('没有登录呢，Ծ‸Ծ')
      } else {
        var data = new FormData()
        data.set('commentId', event.target.getAttribute('id'))
        createZanByComment(data, this)
        if (this.click1Tf === 0) {
          event.target.style.color = 'rgb(15,153,213)'
          event.target.children[0].innerText = parseInt(event.target.children[0].innerText) + 1
          this.click1Tf = 1
        } else if (this.click1Tf === 1) {
          event.target.style.color = 'rgba(120,120,120,.5)'
          event.target.children[0].innerText = parseInt(event.target.children[0].innerText) - 1
          this.click1Tf = 0
        }
      }
    },
    smallClickZan () { // 子评论点赞
      if (this.$store.state.usertf === '1') {
        alert('没有登录呢，Ծ‸Ծ')
      } else {
        var data = new FormData()
        data.set('commentId', event.target.getAttribute('id'))
        createZanByComment(data, this)
        if (this.click2Tf === 0) {
          event.target.style.color = 'rgb(15,153,213)'
          event.target.children[0].innerText = parseInt(event.target.children[0].innerText) + 1
          this.click2Tf = 1
        } else if (this.click2Tf === 1) {
          event.target.style.color = 'rgba(120,120,120,.5)'
          this.click2Tf = 0
          event.target.children[0].innerText = parseInt(event.target.children[0].innerText) - 1
        } else if (this.click2Tf === 2) {
          event.target.style.color = 'rgb(15,153,213)'
          for (let i = 0; i < this.$refs.zan.length; i++) {
            if (event.target.getAttribute('id') === this.$refs.cai[i].getAttribute('id')) {
              this.$refs.cai[i].style.color = 'rgba(120,120,120,.5)'
              this.$refs.cai[i].children[0].innerText = parseInt(this.$refs.cai[i].children[0].innerText) - 1
            }
          }
          event.target.children[0].innerText = parseInt(event.target.children[0].innerText) + 1
          this.click2Tf = 1
        }
      }
    },
    smallClickCai () { // 点踩
      if (this.$store.state.usertf === 1) {
        alert('没有登录呢，Ծ‸Ծ')
      } else {
        var data = new FormData()
        data.set('commentId', event.target.getAttribute('id'))
        createZanByComment(data, this)
      }
      if (this.click2Tf === 1) {
        event.target.style.color = 'rgb(15,153,213)'
        for (let i = 0; i < this.$refs.zan.length; i++) {
          if (event.target.getAttribute('id') === this.$refs.zan[i].getAttribute('id')) {
            this.$refs.zan[i].style.color = 'rgba(120,120,120,.5)'
            this.$refs.zan[i].children[0].innerText = parseInt(this.$refs.zan[i].children[0].innerText) - 1
          }
        }
        event.target.children[0].innerText = parseInt(event.target.children[0].innerText) + 1
        this.click2Tf = 2
      } else if (this.click2Tf === 2) {
        event.target.style.color = 'rgba(120,120,120,.5)'
        this.click2Tf = 0
        event.target.children[0].innerText = parseInt(event.target.children[0].innerText) - 1
      } else if (this.click2Tf === 0) {
        event.target.style.color = 'rgb(15,153,213)'
        event.target.children[0].innerText = parseInt(event.target.children[0].innerText) + 1
        this.click2Tf = 2
      }
    },
    smallPageHandel (ping) { // 子评论分页
      var dom = this.$refs.smalls
      this.smallcurrenPage = parseInt(event.target.innerText) - 1
      var master = event.target.getAttribute('smallTwo')
      var data = new FormData()
      data.set('page', this.smallcurrenPage)
      data.set('size', 5)
      getZiPage(data, event.target.getAttribute('id'), master, this)
      for (let i = 0; i < this.$refs.smalls.length; i++) {
        dom[i].style.color = 'black'
        dom[i].style.fontWeight = '100'
        if (event.target === dom[i]) {
          dom[i].style.color = 'red'
          dom[i].style.fontWeight = 'bold'
        }
      }
    },
    ...mapMutations(['denglu', 'getNowTalks',
      'getNowTalkSmall', 'getNowTalkSmallPage']),
    pagebtn () {
      this.currenPage = parseInt(event.target.innerText) - 1
      pages(this.currenPage, 10, this.$refs.li,
        event.target.innerText, this.pageCount, 4)
      var datas = new FormData()
      datas.set('keywords', 'father')
      datas.set('size', 5)
      datas.set('page', this.currenPage)
      var datass = new FormData()
      datass.set('keywords', 'zi')
      getNowTalk(this.$route.query.id,
        datas,
        datass,
        this
      )
    },
    home () {
      this.currenPage = 0
      pages(this.currenPage, 0, this.$refs.li,
        event.target.innerText, this.pageCount, 4)
      var datas = new FormData()
      datas.set('keywords', 'father')
      datas.set('size', 5)
      datas.set('page', this.currenPage)
      var datass = new FormData()
      datass.set('keywords', 'zi')
      getNowTalk(this.$route.query.id,
        datas,
        datass,
        this
      )
    },
    end () {
      this.currenPage = parseInt(this.pageCount) - 1
      pages(this.currenPage, this.pageCount, this.$refs.li,
        event.target.innerText, this.pageCount, 4)
      var datas = new FormData()
      datas.set('keywords', 'father')
      datas.set('size', 5)
      datas.set('page', this.currenPage)
      var datass = new FormData()
      datass.set('keywords', 'zi')
      getNowTalk(this.$route.query.id,
        datas,
        datass,
        this
      )
    },
    next () {
      if (this.currenPage < this.pageCount - 1) {
        this.currenPage += 1
        pages(this.currenPage, '下一页', this.$refs.li,
          event.target.innerText, this.pageCount, 4)
        var datas = new FormData()
        datas.set('keywords', 'father')
        datas.set('size', 5)
        datas.set('page', this.currenPage)
        var datass = new FormData()
        datass.set('keywords', 'zi')
        getNowTalk(this.$route.query.id,
          datas,
          datass,
          this
        )
      } else {
        alert('已经是最后一页了')
      }
    },
    pret () {
      if (this.currenPage > 0) {
        this.currenPage -= 1
        pages(this.currenPage, '上一页', this.$refs.li,
          event.target.innerText, this.pageCount, 4)
        var datas = new FormData()
        datas.set('keywords', 'father')
        datas.set('size', 5)
        datas.set('page', this.currenPage)
        var datass = new FormData()
        datass.set('keywords', 'zi')
        getNowTalk(this.$route.query.id,
          datas,
          datass,
          this
        )
      } else {
        alert('已经是第一页了')
      }
    },
    huifuHandel ($event) {
      this.indexs = event.target.getAttribute('two')
      this.name = '回复:   ' + event.target.getAttribute('name')
      this.name2 = event.target.getAttribute('name')
      this.id = event.target.getAttribute('id')
      for (let i = 0; i < this.$refs.backInput.length; i++) {
        this.$refs.backInput[i].style.display = 'none'
        if (this.$refs.backInput[i].getAttribute('one') === $event.target.getAttribute('one')) {
          this.$refs.backInput[i].style.display = 'block'
        }
      }
    },
    sendArtical () {
      if (this.$store.state.usertf === '2') {
        if (!(this.clearSpace(this.tals) === '')) {
          var datas = new FormData()
          datas.set('keywords', 'father')
          datas.set('size', 5)
          datas.set('page', this.currenPage)
          var datass = new FormData()
          datass.set('keywords', 'zi')
          var mtals = this.tals
          this.tals = ''
          var dataas = new FormData()
          dataas.set('commentContent', mtals)
          dataas.set('articleId', this.$route.query.id)
          sendTalk(dataas,
            this.$route.query.id,
            datas,
            datass,
            this
          )
        } else {
          this.tals = ''
          alert('小哥哥/小姐姐，发言不能为空内容哦!')
        }
      } else {
        alert('请先登录哦')
      }
    },
    sendSmallhandel () {
      var content = this.talss
      if (!(this.talss === '')) {
        this.talss = ''
        var ma = event.target.getAttribute('master')
        var dataas = new FormData()
        dataas.set('commentContent', '@' + this.name2 + ': ' + content)
        dataas.set('commentId', this.id)
        dataas.set('articleId', this.$route.query.id)
        var data = new FormData()
        data.set('page', this.smallcurrenPage)
        data.set('size', 5)
        sendSmallTalk(dataas, data, ma, this)
      } else {
        this.talss = ''
        alert('小哥哥/小姐姐，发言不能为空内容哦！')
      }
    },
    pleaseDenglu () {
      scroll(0, 0)
      this.denglu(true)
    }
  },
  created () {
    var datas = new FormData()
    datas.set('keywords', 'father')
    var datass = new FormData()
    datass.set('keywords', 'zi')
    getNowTalk(this.$route.query.id, datas, datass, this)
  },
  updated () {
    if (this.currenPage <= 3 && this.$refs.li.length > 0) {
      fenpage(this.$refs.li, this.$refs.li.length)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .talk_box{
    content: " "
    display: table
    clear: both
    position: relative
    margin-top: .6rem
    width: 1100px
    height: auto
    background-color: rgb(255,255,255)
    .talk_header{
      font-size: .5rem
      color: rgb(60,60,60)
      height: 30px
      padding: .2rem
      width: calc(100% - .4rem)
      border-bottom: 1px solid rgb(230,230,230)
    }
    .my_talk{
      user-select: none
      position: relative
      width: 80%
      margin: 0 auto
      height: 160px
      .noTalk{
        position: absolute
        width: 100%
        height: 100%
        font-size: .7rem
        letter-spacing: 1.5px
        text-align: center
        line-height: 130px
        z-index: 5
        background-color: rgb(255,255,255)
      }
      .my_img{
        float: left
        width: 70px
        height: 70px
        margin: 0
        margin: .3rem
        margin-top: .5rem
        img{
          width: 70px
          height: 70px
          border-radius: 50%
        }
      }
      .input{
        position: relative
        margin: .3rem
        margin-top: .5rem
        width: 570px
        height: 50px
        border-radius: 10px
        border: none
        float: left
        .pleaseD{
          position: absolute
          width: 100%
          height: 100%
          border-radius: 10px
          padding: .17rem
          padding-left: .25rem
          padding-right: .27rem
          background-color: rgba(50,50,50,.8)
          div{
            position: absolute
            text-align: center
            line-height: 30px
            color: rgb(235,235,235)
            cursor: pointer
            border-radius: 6px
            background-color: rgb(15,110,213)
            font-size: .3rem
            width: 80px
            height: 30px
            top: 28%
            left: 45%
          }
        }
        textarea{
          width: 100%
          letter-spacing: 1px
          height: 100%
          border-radius: 10px
          resize: none
          outline: none
          border: 1px solid rgb(210,210,210)
          font-size: .25rem
          color: rgb(50,50,50)
          padding: .15rem
          padding-left: .25rem
          padding-right: .25rem
          background-color: rgb(240,240,240)
        }
        textarea:hover{
          border: 1px solid rgb(15,113,213)
          background-color: rgb(255,255,255)
        }
      }
      .send_tlak{
        width: 70px
        text-align: center
        height: 60px
        line-height: 60px
        float: left
        background-color: rgb(15,150,213)
        border-radius: 10px
        margin-left: .4rem
        margin-top: .6rem
        color: rgb(255,255,255)
        cursor: pointer
      }
      .send_tlak:hover{
        background-color: rgb(15,113,213)
      }
      .count{
        position: absolute
        bottom: 20px
        left: 100px
        width: 60px
        height: 30px
        color: rgb(15,153,213)
        font-size: .35rem
        font-weight: bold
        margin-left: .3rem
      }
    }
    .talks_box{
      position: relative
      width: 100%
      height: auto
      content: " "
      display: table
      clear: both
      .boxus:after{
        content: " "
        display: table
        clear: both
      }
      .page_box{
    position: relative
    bottom: 0
    width: 800px
    height: 60px
    margin-top: .4rem
    margin-left: 2.4rem
    .uls_page{
      width: 100%
      height: auto
      position: relative
      list-style: none
      content:" ";
      display: table;
      clear:both;
      padding: 0
      margin: 0
      li{
        float: left
      }
      li + li{
        margin-left: .2rem
      }
      .pagebtn_box{
        position: absolute
        width: 430px
        height: 40px
        left: 150px
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        .page{
          background-color: rgb(255,255,255)
          padding: .2rem
          position: absolute
          display: inline-block
          padding-left: .25rem
          padding-right: .3rem
          border: 1px solid rgb(190,190,190)
          transition: all .5s
          cursor: pointer
        }
      }
      .page:nth-child(1){
        background-color: rgb(15,113,213)
        color: rgb(255,255,255)
      }
      .box{
        position: absolute
        width: 200px
        height: 30px
        right: 0
      }
      .pageCount{
        margin-top: .23rem
      }
      .next,
      .pre,
      .home,
      .end
      {
        background-color: rgb(255,255,255)
        padding: .2rem
        border: 1px solid rgb(190,190,190)
        cursor: pointer
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .next:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .pre:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .page:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .home:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
    }
  }
      .boxus{
        border-top: 1px solid rgb(230,230,230)
        position: relative
        margin: 0 auto
        height: auto
        margin-top: .2rem
        width: 80%
        .user_img{
          position: absolute
          left: 30px
          float: left
          width: 70px
          height: 70px
          margin: 0
          img{
            width: 70px
            height: 70px
            border-radius: 50%
          }
        }
        .huifu_box{
          margin-left: 115px
          width: 570px
          height: auto
          .huifus{
            width: 100%
            height: auto
            content: " "
            display: table
            clear: both
            img{
              width: 40px
              height: 40px
              border-radius: 50%
              margin-top: .05rem
              margin-left: -10px
              float: left
           }
           .small_huifu{
             margin-top: .2rem
             margin-left: .8rem
             width: calc(100%-40px)
             height: auto
             .names{
               cursor: pointer
               font-size: .3rem
               color: rgb(15,153,210)
             }
             .small_huifu_talk{
               font-size: .3rem
               margin-left: .1rem
             }
             .intros{
               width: calc(100% - 40px)
               margin-top: .3rem
               color: rgb(100,100,100)
               font-size: .25rem
               .iconfont{
                 margin-left: .3rem
                 color: rgba(120,120,120,.5)
                 span{
                   margin-left: .05rem
                   font-size: .2rem
                 }
               }
               .iconfont:hover{
                 cursor: pointer
                 color: rgba(15,120,220,.5)
               }
               .s_huifu{
                 margin-left: .5rem
                 cursor: pointer
               }
               .s_huifu:hover{
                 background-color: rgb(190,190,190)
               }
             }
           }
          }
          .smallPage{
            position: relative
            bottom: -5px
            width: 800px
            height: 30px
            list-style: none
            padding: 0
            box-sizing: border-box
            margin: 0
            li{
              position: absolute
              left: 0
              width: 100%
              height: 27px
              overflow: hidden
              div{
                left: 10px
                top: -2px
                position: relative
                margin-top: .17rem
                background-color: rgb(255,255,255)
                font-size: .2rem
                float: left
                display: inline-block
                transition: all .5s
                cursor: pointer
              }
              div:hover{
                color: red
              }
              div + div{
                margin-left: .15rem
              }
            }
          }
        }
        .ss{
          position: relative
          width: 680px
          display: none
          height: 70px
          img{
            float: left
            margin-top: .2rem
            margin-left: -20px
            width: 60px
            height: 60px
            border-radius: 50%
          }
          textarea{
            width: 530px
            letter-spacing: 1px
            height: 52px
            border-radius: 7px
            resize: none
            outline: none
            border: 1px solid rgb(210,210,210)
            font-size: .25rem
            margin-top: .15rem
            margin-left: 20px
            color: rgb(50,50,50)
            padding-left: .2rem
            padding-right: .2rem
            padding-top: .1rem
            background-color: rgb(240,240,240)
          }
          button{
            position: absolute
            width: 60px
            height: 58px
            right: 4px
            outline: none
            cursor: pointer
            top: .2rem
            color: rgb(255,255,255)
            border-radius: 7px
            background-color: rgb(15,150,213)
          }
          button:hover{
            background-color: rgb(15,113,213)
          }
          textarea:hover{
            border: 1px solid rgb(15,113,213)
            background-color: rgb(255,255,255)
          }
        }
        .user_talk{
          height: 80px
          width: 570px
          margin: .3rem
          margin-left: 2.3rem
          margin-top: .5rem
          p{
            margin: 0
          }
          .name{
            cursor: pointer
            color: rgb(15,150,213)
            padding-left: .1rem
            font-weight: bold
            font-size: .3rem
            padding-bottom: .1rem
          }
          .show_talk{
            padding-left: .1rem
          }
          .intro{
            color: rgb(100,100,100)
            font-size: .25rem
            margin-bottom: 0
            margin-top: .35rem
            margin-left: .1rem
            span + span{
              margin-left: .6rem
            }
            .iconfont{
              cursor: pointer
              color: rgba(120,120,120,.5)
              span{
                margin-left: .1rem
                font-size: .25rem
              }
            }
            .iconfont:hover{
              color: rgba(15,120,220,.5)
            }
            .huifu{
              display: inline-block
              width: 25px
              height: 15px
            }
            .huifu:hover{
              background: rgb(190,190,190)
              cursor: pointer
            }
          }
        }
      }
    }
  }
</style>
